<template>
    <el-drawer
        :append-to-body="true"
        :visible.sync="show"
        custom-class="toDo-list"
        :with-header="false"
        @close="close"
        size="340px">
        <div class="toDo-list-content">
            <p class="title">待办事项</p>
            <div class="scroll-box">
                <div class="item" v-for="(item, index) in _toDoList" :key="index">
                    <p class="name">
                        {{ item.message }}{{ (![6].includes(item.type) && (item.type === 8 && !isTown) || item.type !== 8) && item.type !== 9 ? "，" : "" }}
                        <el-button
                            style="padding: 0"
                            v-if="![6].includes(item.type) && ((item.type === 8 && !isTown) || item.type !== 8) && item.type !== 9"
                            type="text"
                            @click="toDoThings(item.type)">
                            {{ item.type === 8 ? "前往查看" : "前往处理" }}
                        </el-button>
                    </p>
                    <p class="time">{{ item.createTime }}</p>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

@Component
export default class ToDoList extends Vue {
    // 打开待办事项抽屉
    show = false

    toDoList: any[] = []
    isTown = false

    get _toDoList() {
        return this.toDoList.map((item: any) => {
            return {
                createTime: item.createTime,
                ...JSON.parse(item.message)
            };
        });
    }

    close() {
        this.show = false;
        this.$emit("onclose");
    }


    toDoThings(type: any) {
        this.$emit("toDoThings", { type });
    }
}
</script>
<style scoped lang="scss">
.toDo-list {
    .toDo-list-content {
        padding: 10px 16px;
        height: 100vh;

        .title {
            font-size: 14px;
            font-family: "PingFang SC Medium";
            line-height: 20px;
            color: #37383A;
            padding-bottom: 10px;
            border-bottom: 1px solid #EDEFF2;;
            margin: 0 0 10px;
        }

        .scroll-box {
            height: calc(100% - 50px);
            overflow: auto;

            .item {
                background: #FFFFFF;
                border: 1px solid #DDDCE4;
                border-radius: 4px;
                padding: 8px;
                margin-bottom: 10px;

                .name {
                    font-size: 14px;
                    font-family: "PingFang SC Medium";
                    line-height: 20px;
                    color: #37383A;
                    margin: 0 0 12px;

                    button {
                        font-size: 0.14rem;
                        color: #2C82C9;
                    }
                }

                .time {
                    font-size: 12px;
                    font-family: "PingFang SC Light";
                    line-height: 17px;
                    color: #B5B5B6;
                    margin: 0;
                }
            }
        }
    }
}
</style>
